<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"
	prefix="c"%>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<title>购物车页面</title>
		<base href="${pageContext.request.contextPath }/"/>
		<c:import url="/head.jsp" />
		<link href="front/AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css" />
		<link href="front/basic/css/demo.css" rel="stylesheet" type="text/css" />
		<link href="front/css/cartstyle.css" rel="stylesheet" type="text/css" />
		<link href="front/css/optstyle.css" rel="stylesheet" type="text/css" />
		<link href="front/css/index.css" rel="stylesheet" type="text/css" />
		
		<script type="text/javascript" src="front/js/jquery.js"></script>

	</head>

	<body>
	<c:set scope="request" var="header" value="1" />

		<!--顶部导航条 -->
		<div class="hmtop">
			<div class="am-container header">
				<ul class="message-l">
					<div class="topMessage">
						<div class="menu-hd">
							<a href="login1.jsp" target="_top" class="h"> 你好 !</a>
							<a href="register.jsp" target="_top" style="color: #F03726;"></a>
						</div>
					</div>
				</ul>
				<ul class="message-r">
					<div class="topMessage home">
						<div class="menu-hd"><a href="mall-list.let" target="_top" class="h">商城首页</a></div>
					</div>
					<div class="topMessage my-shangcheng">
						<div class="menu-hd MyShangcheng"><a href="user/index.jsp" target="_top"><i class="am-icon-user am-icon-fw" style="color: #F03726;"></i>个人中心</a></div>
					</div>
					<div class="topMessage mini-cart">
						<div class="menu-hd"><a id="mc-menu-hd" href="mall-cart.let" target="_top"><i class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span></a></div>
					</div>
					<div class="topMessage favorite">
						<div class="menu-hd"><a href="logout.let" target="_top"><span>退出登录</span></a></div>
				</ul>
				</div>

				<!--悬浮搜索框-->

				<div class="nav white">
					<div class="logoBig">
						<a href="mall-list.let">
						<li><img src="front/images/logobig.png" alt="图片加载中" style="width: 80px; height: 80px; padding-top: 5px;" /><img src="front/images/logo_font.png" alt="图片加载中" style="width: 88px; height: 35px; display: inline-block;position: absolute;top: 25px;"/></li>
						</a>
					</div>

					<div class="search-bar pr" style="width: 960px;position: absolute;">
						<a name="index_none_header_sysc" href="#"></a>
						<form action="search.let" method="get">
							<input id="searchInput" name="key" type="text" placeholder="请输入关键字" autocomplete="off" value="${search.key }">
							<input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="submit">
						</form>
					</div>
				</div>

				<div class="clear"></div>
			</div>


			<div class="clear"></div>

			<!--购物车 -->
			<div class="concent">
				<div id="cartTable">
				<form name="cartForm" method="post" action="mall/cart/pay-start.jsp">
					<div class="cart-table-th">
						<div class="wp">
							<div class="th th-chk">
								<div id="J_SelectAll1" class="select-all J_SelectAll">

								</div>
							</div>
							<div class="th th-item">
								<div class="td-inner">商品信息</div>
							</div>
							<div class="th th-price">
								<div class="td-inner">单价</div>
							</div>
							<div class="th th-amount">
								<div class="td-inner">数量</div>
							</div>
							<div class="th th-op">
								<div class="td-inner">操作</div>
							</div>
						</div>
					</div>
					<div class="clear"></div>
					<tr class="item-list">
					<c:set var="count" value="0"></c:set>
						<c:forEach items="${list }" var="vo">
						<div class="bundle  bundle-last ">
							<div class="clear"></div>
							<div class="bundle-main">
								<ul class="item-content clearfix">
									<li class="td td-chk">
										
											<input style="margin-top: 2.5em" checked="checked"
										name="productId" type="checkbox" value="${vo.productId }" />
											
										
									</li>
									<li class="td td-item">
										<div class="item-pic">
											<a href="mall-product.let?productId=${vo.productId }" data-title="${vo.productName }" class="J_MakePoint" data-point="tbcart.8.12">
												<img src="${vo.productImgs }" alt="${vo.productName }" style="width:100%"></a>
										</div>
										<div class="item-info">
											<div class="item-basic-info">
												<a href="mall-product.let?productId=${vo.productId }" title="${vo.productName }" class="item-title J_MakePoint" data-point="tbcart.8.11">${vo.productName }</a>
											</div>
										</div>
									</li>
									<li class="td td-info">
										<div class="item-props item-props-can">
											<span class="sku-line">颜色：10#蜜橘色</span>
											<span class="sku-line">包装：两支手袋装（送彩带）</span>
											<span tabindex="0" class="btn-edit-sku theme-login">修改</span>
											<i class="theme-login am-icon-sort-desc"></i>
										</div>
									</li>
									<li class="td td-price">
										<div class="item-price price-promo-promo">
											<div class="price-content">
												<div class="price-line">
													<em class="price-original">${t.formatNumber(vo.productPrice1,2) }</em>
												</div>
												<div class="price-line">
													<em class="J_Price price-now" tabindex="0">${t.formatNumber(vo.productPrice2,2) }</em>
												</div>
											</div>
										</div>
									</li>
									<li class="td td-amount">
										<div class="" style="margin-right: 4em">
									<input class="form-control" style="margin-left: 3em"
										name="cartNum"  data-p="${vo.productPrice2 }" step="1" min="1" type="number"
										value="${vo.cartNum }" />
								</div>	
									</li>
									<li class="td td-op">
										<div class="td-inner">
											<a title="移入收藏夹" class="btn-fav">
                  移入收藏夹</a>
											<button type="button" data-id="${vo.cartId }" class="btn btn-danger" id="_del">
                  删除</button>
										</div>
									</li>
								</ul>
							</div>
						</div>
						<c:set var="count" value="${count+vo.cartNum*vo.productPrice2  }" />
						<div class="clear"></div>
						</c:forEach>
						
					</tr>
						<div class="clear"></div>

				<div class="float-bar-wrapper">
					
					
					<div class="float-bar-right">
						
						<div class="price-sum">
							<span class="txt">合计:</span>
							<strong class="price">¥<em id="count">${t.formatNumber(count,2) }</em></strong>
							<input type="hidden" name="count" value="${t.formatNumber(count,2) }"/>
						</div>
						<div class="btn-area">
							<button id="submitBtn" class="btn  btn-lg mt-2 mb-2" aria-label="请注意如果没有选择宝贝，将无法结算">
								<span>结&nbsp;算</span></button>
						</div>
					</div>

				</div>
				</form>
				<script type="text/javascript">
						var cartForm = $(document.forms.cartForm);
						console.info(cartForm);
						cartForm.find('[name="productId"]').change(function(){
							let cartNum = $(this).parent().parent().find('[name="cartNum"]');
							console.info(cartNum);
							cartNum.prop("disabled",!$(this).prop("checked"));
							countFn();
							console.info("aaaaaaaaa");
						});
						
						var cartNums = cartForm.find('[name="cartNum"]');
						var countObj = $("#count");
						
						/**统计求和**/
						var countFn = function(){
							var count = 0;
							
							cartNums.each(function(){
								if(!this.disabled){
									count+=Number($(this).data("p"))*Number(this.value);
								}
							});
							$("#submitBtn").prop("disabled",count==0);
							countObj.text(count.toFixed(2));
							cartForm.find('[name="count"]').val(count.toFixed(2));
							console.info("完成");
						}
						
						cartNums.change(countFn);
						
						
						
						var del = $("#_del");
						del.click(function(){
							$.post(
								"mall-cart.let?action=delete&cartId="+del.attr("data-id"),
								function(data){
									if(data.code==200){
										sys.toastr.success("删除成功！");
										window.location.reload();
									}else{
										sys.toastr.error(data.message);
									}
								},"json"
							);
						});
						
					</script>
			</div>
			

				<div class="footer ">
						<div class="footer-hd ">
							<p>
								<a href="about.let?name=1278551338296279040 ">舒心购</a>
								<b>|</b>
								<a href="mall-list.let">商城首页</a>
							</p>
						</div>
						<div class="footer-bd ">
							<p>
								<a href="about.let?name=1278551338296279040 ">关于舒心购</a>
								<b>|</b>
								<a href="join.let?name=1278551338526965760 ">联系我们</a>
								<b>|</b>
								<em>© 2020-2025 shuxingou.com 版权所有</em>
							</p>
						</div>
					</div>

			</div>

			<!--操作页面-->

			<div class="theme-popover-mask"></div>

			<div class="theme-popover">
				<div class="theme-span"></div>
				<div class="theme-poptit h-title">
					<a href="javascript:;" title="关闭" class="close">×</a>
				</div>
				<div class="theme-popbod dform">
					

						<div class="theme-signin-left">

							<li class="theme-options">
								<div class="cart-title">颜色：</div>
								<ul>
									<li class="sku-line selected">12#川南玛瑙<i></i></li>
									<li class="sku-line">10#蜜橘色+17#樱花粉<i></i></li>
								</ul>
							</li>
							<li class="theme-options">
								<div class="cart-title">包装：</div>
								<ul>
									<li class="sku-line selected">包装：裸装<i></i></li>
									<li class="sku-line">两支手袋装（送彩带）<i></i></li>
								</ul>
							</li>
							<div class="theme-options">
								<div class="cart-title number">数量</div>
								<dd>
									<input class="min am-btn am-btn-default" name="" type="button" value="-" />
									<input class="text_box" name="" type="text" value="1" style="width:30px;" />
									<input class="add am-btn am-btn-default" name="" type="button" value="+" />
									<span  class="tb-hidden">库存<span class="stock">1000</span>件</span>
								</dd>

							</div>
							<div class="clear"></div>
							<div class="btn-op">
								<div class="btn am-btn am-btn-warning">确认</div>
								<div class="btn close am-btn am-btn-warning">取消</div>
							</div>

						</div>
						<div class="theme-signin-right">
							<div class="img-info">
								<img src="../images/kouhong.jpg_80x80.jpg" />
							</div>
							<div class="text-info">
								<span class="J_Price price-now">¥39.00</span>
								<span id="Stock" class="tb-hidden">库存<span class="stock">1000</span>件</span>
							</div>
						</div>

				
				</div>
			</div>
		<!--引导 -->
		<div class="navCir">
			<li><a href="home2.html"><i class="am-icon-home "></i>首页</a></li>
			<li><a href="sort.html"><i class="am-icon-list"></i>分类</a></li>
			<li class="active"><a href="shopcart.html"><i class="am-icon-shopping-basket"></i>购物车</a></li>	
			<li><a href="../person/index.html"><i class="am-icon-user"></i>我的</a></li>					
		</div>
	</body>

</html>